<template>
  <view class="pageway-every" v-show="false">
    <view class="pageway-box" 
          :class="{ active: isPagewayActive === index }" 
          @click="setPagewayActive(index)" 
          v-for="(item, index) in pagewaylist" 
          :key="index">
      {{ item }}
    </view>
  </view>
</template>

<script>
import '@/common/iconfont.css'
export default {
  data() {
    return {
      isPagewayActive: 0, // 默认选中第一个选项
      pagewaylist: [
        "仿真",
        "覆盖",
        "滑动",
        "无"
      ]
    }
  },
  methods: {
    setPagewayActive(index) {
      this.isPagewayActive = index;
    }
  }
}
</script>

<style lang="scss">
@import '/common/novel/novel.scss';

.pageway-every {
  width: 100vw;
  height: 8vh;
  position: absolute;
  bottom: 0px;
  background-color: var(--bg-color);
  display: flex;
  align-items: center;
  padding-left: 10px;
  
  .pageway-box {
    margin: 10px;
    width: 50px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid var(--font-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: var(--font-color);
    transition: all 0.3s; // 添加过渡效果
    
    &.active {
      border: 1px solid red;
      color: red;
      transform: scale(1.05); // 选中项稍微放大
    }
  }
}
</style>